<template>
  <div ref="myChart" id="myChart"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  mounted() {
    let myChart = echarts.init(this.$refs.myChart);
    // let data = [
    //   { value: 66, name: "美食", normal: { color: "rgb(0,175,80)" } },
    //   { value: 77, name: "美食1", normal: { color: "rgb(80,175,0)" } },
    //   { value: 88, name: "美食2", normal: { color: "rgb(175,175,80)" } },
    //   { value: 99, name: "美食3", normal: { color: "rgb(80,175,80)" } },
    //   { value: 110, name: "美食4", normal: { color: "rgb(100,175,80)" } },
    // ];
    let data = [
      {
        value: 66,
        name: "美食",
        itemStyle: { normal: { color: "rgb(0,175,80)" } },
      },
      {
        value: 77,
        name: "美食1",
        itemStyle: { normal: { color: "rgb(80,80,0)" } },
      },
      {
        value: 88,
        name: "美食2",
        itemStyle: { normal: { color: "rgb(175,60,80)" } },
      },
      {
        value: 99,
        name: "美食3",
        itemStyle: { normal: { color: "rgb(80,90,80)" } },
      },
      {
        value: 110,
        name: "美食4",
        itemStyle: { normal: { color: "rgb(100,175,80)" } },
      },
    ];
    let option = {
      title: {
        text: "饼状图",
        left: "center",
      },
      legend: {
        left: "left",
        // 图例布局朝向
        orient: "verical",
      },
      series: [
        {
          name: "销量统计",
          type: "pie", // 饼状图
          data,
          radius: ["40%", "70%"], // 设置饼状图半径 1.内半径 2.外半径
          // 设置环形图的文本标签
          label: {
            show: true,
            position: "inner", // outside 外侧  inside/inner 内测  center 中心
          },
          roseType: "radius",
          itemStyle: {
            // color: "#4739ab",
            shadowBlur: 200,
            shadowColor: "rgba(0,0,0,.5)",
          },
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style>
#myChart {
  width: 500px;
  height: 500px;
  border: 1px solid #333;
}
</style>